<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .demo {
      border: solid 1px #ccc;
    }
  </style>
</head>

<body>
  <div class="demo"></div>

  <script type="text/javascript">
    const text = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ipsum vitae, laborum, nesciunt minus praesentium error deserunt rerum non aut nostrum ullam dolorum. Asperiores alias unde quos odit? Excepturi, similique!`;

    const totalTextLen = text.length;
    const formatStr = () => {
      const ele = document.getElementsByClassName('demo')[0];
      const lineNum = 2;
      const baseWidth = window.getComputedStyle(ele).width;
      const baseFontSize = window.getComputedStyle(ele).fontSize;
      const lineWidth = +baseWidth.slice(0, -2);

      // 所计算的strNum为元素内部一行可容纳的字数(不区分中英文)
      const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));

      let content = '';

      // 多行可容纳总字数
      const totalStrNum = Math.floor(strNum * lineNum);

      const lastIndex = totalStrNum - totalTextLen;

      if (totalTextLen > totalStrNum) {
        content = text.slice(0, lastIndex - 3).concat('...');
      } else {
        content = text;
      }
      ele.innerHTML = content;
    }

    formatStr();

    window.onresize = () => {
      formatStr();
    };
  </script>
</body>

</html>